<template>
  <div class="mobile">
    <a-card class="listDetail mobileHeight p10" :bordered="false">
      <h3 v-model="aidType">{{aidType}}</h3>
      <ul>
        <li>提交时间：<span >{{createTime}}</span></li>
        <li>提交人：<span>{{createBy}}</span></li>
      </ul>
      <p class="mb10" v-html="content" style="white-space: pre-wrap;">
        {{content}}
      </p>
      <div>
        <img :src="picIdArray[i].url" v-for="(v,i) in picIdArray">
      </div>

      <!--视频预览-->
      <div v-for="(v,i) in videoArray" class="audio-play clearfix">
        <div class="audio-play-name"><a-badge color="#1890ff" text="视频" /></div>
        <video-player class="video-player vjs-custom-skin"
                      ref="videoPlayer"
                      :options="playerOptions"
                      :playsinline="playsinline">
        </video-player>
      </div>


      <div v-for="(v,i) in voiceArray" style="display:none">
        <audio ref="audio" :src="voiceArray[i].url" controls="controls"></audio>
      </div>
      <div class="audio-play clearfix" v-for="(v,i) in voiceArray">
        <div class="audio-play-name"><a-badge color="#1890ff" text="音频" /></div>
        <div class="audio-play-icon fl" @click="handlePlay()">
          <img :hidden="closeAudioImg" src="../../assets/img/mobile/icon-audio.png">
          <img :hidden="openAudioImg" src="../../assets/img/mobile/icon-audio.gif">
        </div>
        <span class="fl">{{voiceArray[i].fileName}}</span>
      </div>

      <div class="addAdress-map audio-play">
        <div class="audio-play-name"><a-badge color="#1890ff" text="事发地点" /></div>
        <div class="addAdress-map-name">{{address}}</div>
      </div>
      <div id="allMap" style="width:100%;height:300px"></div>
    </a-card>
    <div class="weui-tabbar">
      <a href="javascript:void(0);" class="weui-tabbar__item" @click="firstPage()">
        <span><i class="iconfont iconzhuye2"></i></span>
        <p class="weui-tabbar__label">首页</p>
      </a>
      <a href="javascript:void(0);" class="weui-tabbar__item" @click="hrhsPage()">
        <span><i class="iconfont icondianzan3"></i></span>
        <p class="weui-tabbar__label">好人好事</p>
      </a>
      <a href="javascript:void(0);" class="weui-tabbar__item" @click="myPage()">
        <span><i class="iconfont iconwode-copy"></i></span>
        <p class="weui-tabbar__label">我的</p>
      </a>
    </div>
  </div>
</template>

<script>
  import { postAction,getAction,getFileAccessHttpUrl } from '@/api/manage'
  import { videoPlayer } from "vue-video-player";
  import "video.js/dist/video-js.css";
  import "vue-video-player/src/custom-theme.css";
  import {MP} from '@/map'

  var baseUrl="";
  export default {
    name: 'GoodThingsDetail',
    components: {
      videoPlayer
    },
    data() {
      return {
        ak: 'gIQitMgqO4MQh8CwP5gz7VV07ptPH72R',
        aidType:"",
        createBy:"",
        createTime:"",
        content:"",
        address:"",
        closeAudioImg:false,
        openAudioImg:true,
        picIdArray:[],
        voiceArray:[],
        videoArray:[],
        playTime:'',
        current:'',
        playerOptions: {
          playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
          autoplay: false, // 如果为true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 是否视频一结束就重新开始。
          preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: "zh-CN",
          aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [
            {
              type: "video/mp4", // 类型
              src:"" // url地址
            }
          ],
          poster: "", // 封面地址
          notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true, // 当前时间和持续时间的分隔符
            durationDisplay: true, // 显示持续时间
            remainingTimeDisplay: false, // 是否显示剩余时间功能
            fullscreenToggle: true // 是否显示全屏按钮
          },
        },
      };
    },
    computed: {
      playsinline () {
        let ua = navigator.userAgent.toLocaleLowerCase()
        // x5内核
        if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
          return false
        } else {
          // ios端
          return true
        }
      }
    },
    created(){
      document.title = "未成年人保护";
      this.initBaseUrl();
      this.getGoodThingsDetail();
    },
    mounted() {
      let id = this.$route.query.id
      postAction("/minorProtect/detail?id="+id).then(res=>{
        if(res.success){
          let location = JSON.parse(res.result.minorProtect.location)
          this.address = location.keyword;
          this.$nextTick(function () {
            MP(this.ak).then( BMap => {
              let map = new BMap.Map("allMap");            // 创建Map实例
              let point = new BMap.Point(Number(location.center.lng),Number(location.center.lat)); // 创建点坐标
              let marker = new BMap.Marker(point); //创建marker对象
              map.addOverlay(marker);
              map.centerAndZoom(point,15);
              map.disableDoubleClickZoom() //禁止缩放
              map.disableScrollWheelZoom();
              map.disableDragging();     //禁止拖拽
            })
          })
        }
      }).catch(()=>{

      })
    },
    methods: {
      initBaseUrl(){
        baseUrl=window._CONFIG['domianURL'];
      },
      handleVideoPlay(record){
        this.$refs.KPreviewSysFile.showFile(record.fileName,record.fileId,record.ext);
      },
      handlePlay(){
        let that = this;
        that.closeAudioImg=true;
        that.openAudioImg=false;
        let audio = document.getElementsByTagName('audio')[0];
        audio.play();
        audio.addEventListener('ended', function () {
          audio.src = audio.src
          that.closeAudioImg=false;
          that.openAudioImg=true;
        }, false);
      },
      getGoodThingsDetail(){
        let id = this.$route.query.id
        postAction("/minorProtect/detail?id="+id).then(res=>{
          if(res.success){
            this.aidType = res.result.minorProtect.aidType
            this.createTime = res.result.minorProtect.createTime
            this.createBy = res.result.minorProtect.createBy
            this.content = res.result.minorProtect.content
            let picJsonArray = JSON.parse(res.result.minorProtect.picAttach);
            for(var i = 0; i < picJsonArray.length; i++){
              this.picIdArray.push({url: baseUrl+'/file/sysFile/download?fileId='+picJsonArray[i].fileId,fileId:picJsonArray[i].fileId});
            }
            let radioJsonArray = JSON.parse(res.result.minorProtect.radioAttach);
            for(var i = 0; i < radioJsonArray.length; i++){
              getAction("/file/sysFile/getMediaPath?fileId="+radioJsonArray[i].fileId).then(res => {
                //获取url地址
                let url = res.httpUrl;
                if (res.localFile == true) {
                  url=getFileAccessHttpUrl(url)
                  this.voiceArray.push({url: url,fileId:res.sysFile.fileId,ext:res.sysFile.ext,fileName:res.sysFile.fileName});
                }
              })
            }
            let videoJsonArray = JSON.parse(res.result.minorProtect.videoAttach);
            for(var i = 0; i < videoJsonArray.length; i++){
              getAction("/file/sysFile/getMediaPath?fileId="+videoJsonArray[i].fileId).then(res => {
                //获取url地址
                let url = res.httpUrl;
                if (res.localFile == true) {
                  url=getFileAccessHttpUrl(url)
                  this.playerOptions['sources'][0]['src'] = url;
                  this.showVideo = true;
                  this.videoArray.push({url: url,fileId:res.sysFile.fileId,ext:res.sysFile.ext,fileName:res.sysFile.fileName});
                }
              })
            }
          }
        }).catch(()=>{

        })
      },
      firstPage(){
        this.$router.push('/MinorsProtecteGuide');
      },
      hrhsPage(){
        this.$router.push('/GoodThingsList');
      },
      myPage(){
        this.$router.push('/PersonalMsg');
      }
    },
  };
</script>
<style>
.vjs-control-bar{
  overflow:hidden !important;
}
</style>
